<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
	<title>个人主页</title>
	<script src="js/jquery-1.11.3.min.js"></script>
	<script src="js/xl_person_index.js"></script>
	<link href="css/xl_person_index_basic.css" rel="stylesheet"/>
	
	<link rel="icon" href="images/haipumi.ico"/> 
	<link href="css/global.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="css/sweet-alert.css"/>
	<script src="js/sweet-alert.min.js" type="text/javascript"></script>
    
    
	<script type="text/javascript" src="jquery-easyui-1.4.3/jquery.min.js"></script>
	<script type="text/javascript" src="jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script> 
	<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/themes/ui-pepper-grinder/easyui.css">
	<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/themes/icon.css">
    
    
    <style type="text/css">
    	#yhj_changephoto:hover{
    		color:orange;
    		cursor:pointer;
    	}
    </style>
    
   
    
    
  </head>
  
  <body>
    	
	    <!--头部内容开始 -->
	    <iframe id="lk_head_adjust_div" class="yhj_head" name="yhj_head" src="head.jsp"></iframe>
	    <!--头部内容结束-->
		
	    <div class="yhj_quickregister_0"></div><!--只是用来占位的-->
	    <!--内容开始-->
		<div class="xl_person_index_container" style="background:url(images/background/${sessionScope.userinfosession.simage}) no-repeat ${sessionScope.userinfosession.scolor};background-size:cover;"><!-- 从session中取出颜色 -->
	    	<div class="xl_person_index_header">
	        	<div class="xl_person_index_header_top" style="background:url(images/background/${sessionScope.userinfosession.simage})">
	        		<div style="width:920px; height:300px;background:rgba(0,0,0,.4);">
		            	<a href="#">           	
		                    <div class="xl_person_index_photo">
		                        
		                    </div>
		                    <div class="xl_person_index_photo_border">
		                     </div>
		                 </a>
		                 <font id="yhj_changephoto" onClick="onChangePhoto()" color="#fff" style="position:absolute; top:100px;left:530px;">点击修改头像</font>
		                <div class="xl_person_index_username">
		                    <h1 class="xl_person_index_h1_username" id="xl_person_index_h1_username">${sessionScope.userinfosession.ualais}</h1>
		                </div>
		                <div class="xl_person_index_intro">
		                    <a href="#" class="xl_person_index_a_intro" id="xl_person_index_a_intro">${sessionScope.userinfosession.uinfo }</a>
		                </div>
		         	</div>
	             </div>
	             <div class="xl_person_index_header_bottom" style="background:#999;"><!-- 需要从登录用户的session中取出颜色 -->
	             	<ul  id="xl_person_index_header_ul">
	                	<li id="xl_person_index_first_li"><a href="javascript:xl_show(0)"><span>个人信息</span></a></li>
	                    <li><a href="javascript:xl_show(1)"><span>等级</span></a></li>
	                    <li><a href="javascript:xl_show(2)"><span>积分</span></a></li>
	                    <li style="display:none;"><a href="javascript:xl_show(3)"><span>反馈</span></a></li>
	                    <li style="display:none;"><a href="javascript:xl_show(4)"><span>数据分析</span></a></li>
	                </ul>	
	             </div>
	        </div>
	        <div class="xl_person_index_content" style="display:display;">
	        	<div class="xl_person_index_content_main">
	            	<div class="xl_person_index_div_info">
	                	<form class="xl_person_index_info_title" action="" method="post">
	                    	<fieldset>
	                        	<legend class="xl_tit_info">基本信息</legend>
	                            <div class="xl_person_index_info_div_btn">
	                            	<a class="xl_person_index_info_a_btn" href="javascript:savebaseinfo()">
	                                	<span>保存</span>
	                                </a>
	                            </div>
	                        </fieldset>
	                        <div class="xl_person_index_info_baseinfoall">
	                        <div class="xl_person_index_info_baseinfo">
	                            <div class="xl_person_index_info_login">登录名</div>
	                            <div class="xl_person_index_info_loginname">
	                                ${sessionScope.userinfosession.ulogon }
	                                <a href="javascript:void(0)"  onClick="changepwd()">修改密码</a>
	                            </div>
	                        </div>
	                        
	                        <div class="xl_person_index_info_baseinfo">
	                            <div class="xl_person_index_info_login"><font style="color:red;">*</font>昵&nbsp;称</div>
	                            <div class="xl_person_index_info_loginname">
	                                <input class="xl_person_index_info_input_loginname" type="text" name="xl_person_index_info_input_loginname" placeholder="请输入昵称" />
	                                <font color="red" style="margin-left:20px;">昵称以数字或字母开头，可包含中文、数字、字母、下划线，长度在4~10字之间</font>
	                            </div>
	                        </div>
	                        
	                        <div class="xl_person_index_info_baseinfo">
	                            <div class="xl_person_index_info_name">真实姓名</div>
	                            <div class="xl_person_index_info_truename">
	                                <input class="xl_person_index_info_input_truename" type="text" name="xl_person_index_info_input_truename"value="${sessionScope.userinfosession.uname }" placeholder="请输入真实姓名" />
	                            </div>
	                        </div>
	                        
	                        <div class="xl_person_index_info_baseinfo" style="display:none;"><!-- 没有输出了 -->
	                            <div class="xl_person_index_info_place"><font style="color:red;">*</font>所在地</div>
	                            <div class="xl_person_index_info_placename">
	                                <select id="xl_person_index_info_city" name="xl_person_index_info_city">
										<option>北京</option>
	                                </select>
	                       
	                                <select id="xl_person_index_info_area" name="xl_person_index_info_area">
	                                	<option>东城区</option>
	                                </select>
	                            </div>
	                        </div>
	                        
	                        <div class="xl_person_index_info_baseinfo">
	                            <div class="xl_person_index_info_sex">性别</div>
	                            <div class="xl_person_index_info_sexinput">
	                             	<label for="xl_person_index_man_radio" class="xl_person_index_man_label">
	                                	<input type="radio" class="xl_person_index_man_radio" checked="checked" value="男" name="xl_person_index_gender">男
	                                </label>
	                                <label for="xl_person_index_woman_radio">
	                                	<input type="radio" class="xl_person_index_man_radio"  value="女" name="xl_person_index_gender">女
	                                </label>
	                                <label for="xl_person_index_woman_radio">
	                                	<input type="radio" class="xl_person_index_man_radio"  value="保密" name="xl_person_index_gender">保密
	                                </label>
	                            </div>
	                        </div>
	                        
	                        <div class="xl_person_index_info_baseinfo" style="display:none">
	                            <div class="xl_person_index_info_emotion">感情状况</div>
	                            <div class="xl_person_index_info_emotiondiv">
									<select id="xl_person_index_info_emotionselect" name="xl_person_index_info_emotionselect">
	                                	<option>单身</option>
	                                    <option>求交往</option>
	                                    <option>订婚</option>
	                                    <option>已婚</option>
	                                    <option>离异</option>
	                                    <option>恋爱中</option>
	                                </select>
	                            </div>
	                        </div>
	                         
	                        <div class="xl_person_index_info_baseinfo" style="display:none;">
	                            <div class="xl_person_index_info_birthday">生日</div>
	                            <div class="xl_person_index_info_birthselect">
	                                <select id="xl_person_index_info_year" name="xl_person_index_info_year">
										<option>----</option>
	                                </select>
	                       
	                                <select id="xl_person_index_info_month" name="xl_person_index_info_month">
	                                	<option>--</option>
	                                </select>
	                                
	                                <select id="xl_person_index_info_day" name="xl_person_index_info_day">
	                                	<option>--</option>
	                                </select>
	                            </div>
	                        </div>
	                        
	                         <div class="xl_person_index_info_baseinfo">
	                            <div class="xl_person_index_info_intro"><font style="color:red;">*</font>简介</div>
	                            <div class="xl_person_index_info_personintro">
	                             	<textarea class="xl_person_index_info_intro_textarea" rows="2" name="xl_person_index_info_intro_textarea" placeholder="请输入个人简介">${sessionScope.userinfosession.uinfo }</textarea><font color="red" style="margin-left:20px;">个人简介不超过100字</font>
	                            </div>
	                		</div>
	                        
	                    </div><!--xl_person_index_info_baseinfoall-->
	                
	                </form>
	                </div><!--xl_person_index_div_info-->
	                
	                    
	                    
	                
	                <div class="xl_person_index_div_info">
	                	<form class="xl_person_index_info_title" action="" method="post">
	                    	<fieldset>
	                        	<legend class="xl_tit_info">联系信息</legend>
	                            <div class="xl_person_index_info_div_btn">
	                            	<a class="xl_person_index_info_a_btn" href="javascript:saveTel()">
	                                	<span>保存</span>
	                                </a>
	                            </div>
	                        </fieldset>
	                         <div class="xl_person_index_info_baseinfo">
	                            <div class="xl_person_index_info_contact">邮箱</div>
	                            <div class="xl_person_index_info_contact_div">
	                                  <input class="xl_person_index_info_contact_input" type="text" readonly="readonly" name="xl_person_index_info_contact_input" value="${sessionScope.userinfosession.ulogon }" placeholder="请输入邮箱地址" /><font color="red" style="margin-left:20px;">邮箱已绑定，不能更改</font>
	                           </div>
	                    </div>
	                    
	                    <div class="xl_person_index_info_baseinfo">
	                            <div class="xl_person_index_info_contact">QQ</div>
	                            <div class="xl_person_index_info_contact_div">
	                                  <input class="xl_person_index_info_contact_input" type="text" name="xl_person_index_info_contact_input" value="${sessionScope.userinfosession.uqq }" placeholder="请输入QQ号" />
	                           </div>
	                    </div>
	                    
	                    <div class="xl_person_index_info_baseinfo">
	                            <div class="xl_person_index_info_contact">手机号码</div>
	                            <div class="xl_person_index_info_contact_div">
	                                  <input class="xl_person_index_info_contact_input" type="text" name="xl_person_index_info_contact_input" value="${sessionScope.userinfosession.utel }" placeholder="请输入手机号" />
	                           </div>
	                    </div></form>
	                </div>
	       
	                    
	                <br/><br/><br/><br/><br/>
	
	                <div class="xl_person_index_div_info" id="xl_person_index_div_info" style="display:none">
	                	<form class="xl_person_index_info_title" action="" method="post">
	                    	<fieldset>
	                        	<legend class="xl_tit_info">标签信息</legend>
	                            <div class="xl_person_index_info_div_btn">
	                            	<a class="xl_person_index_info_a_btn" href="javascript:saveTip()">
	                                	<span>保存</span>
	                                </a>
	                                
	                               
	                            </div>
	                        </fieldset>
	                        <div class="xl_person_index_taginfo">
	                        <div class="xl_person_index_info_tag">标签</div>
	                        <div class="xl_person_index_info_tag_div">
	                            <div class="xl_person_index_info_tag_selected">
	                           		<input class="xl_person_index_inputtag" type="text" value="${sessionScope.userinfosession.uinfo }"/>
	                                <p class="xl_person_index_tishi" style="display:none;">限7个字</p>
	                            </div>
	                            
	                            <div class="xl_person_index_info_tips_error" style="display:none;">
	                            	最多可添加10个标签
	                                <span class="xl_person_index_closespan">X</span>
	                            </div>
	                           
	                            <div class="xl_person_index_info_tag_unselected">你可能感兴趣的标签：</div>
	                        </div>
	                        <div class="xl_person_index_info_tag_more"><a href="javascript:xl_tagChange()">换一换</a></div>
	                    </div>
	                    </form>
	                </div>
	               
	               
	                
	            </div>
	        </div>
	        
	        
	        <div class="xl_person_index_content" style="display:none;">
	        	<div class="xl_person_index_rank">
	            	<div class="xl_person_index_nowrank">
	                	<div class="xl_person_index_h3">当前等级：<em>Lv.</em><span>${sessionScope.userinfosession.urank }</span></div>
	                    <div class="xl_person_index_ranknum">
	                    	<ul>
	                        	<li>0</li>
	                            <li>1</li>
	                            <li>2</li>
	                            <li>3</li>
	                            <li>4</li>
	                            <li>5</li>
	                            <li>6</li>
	                            <li>7</li>
	                            <li>8</li>
	                            <li>9</li>
	                            <li>10</li>
	                        </ul>    
	                    </div>
	                    <div class="xl_person_index_rankpic"><div class="xl_person_index_rankpic_rate"></div></div>
	                    <div class="xl_person_index_rankpic_line_div">
	                        <div class="xl_person_index_rankpic_line"></div>
	                        <div class="xl_person_index_rankpic_line"></div>
	                        <div class="xl_person_index_rankpic_line"></div>
	                        <div class="xl_person_index_rankpic_line"></div>
	                        <div class="xl_person_index_rankpic_line"></div>
	                        <div class="xl_person_index_rankpic_line"></div>
	                        <div class="xl_person_index_rankpic_line"></div>
	                        <div class="xl_person_index_rankpic_line"></div>
	                        <div class="xl_person_index_rankpic_line"></div>
	                        <div class="xl_person_index_rankpic_line"></div>
	                        <div class="xl_person_index_rankpic_line"></div>
	                    </div>    
	                </div>
	                <div class="xl_person_index_nowright">
	                	<div class="xl_person_index_right">当前等级特权：</div>
	                    <div class="xl_person_index_rightlist">
	                    	<ul>
	                        	<li>没有任何特权，加油升级哦！</li>
	                        </ul>
	                    </div>
	                    <div class="xl_person_index_moreright"><a href="#">了解等级特权></a></div>
	                </div>
	                <div class="xl_person_index_nextrank">
	                	<dl>
	                    	<dt>距离下一个等级:<span>Lv.${sessionScope.userinfosession.urank+1 }</span> </dt>
	                        <dd>积分:<div class="lk_person_index_needscore"><div class="lk_person_index_needscore_rate"></div></div>还需要<span>50<span>积分</dd>
	                    </dl>
	                </div>
	            </div>
	        </div>
	        <div class="xl_person_index_content" style="display:none;">3</div>
	        <div class="xl_person_index_content" style="display:none;">4</div>
	        <div class="xl_person_index_content" style="display:none;">5</div>
	    </div>
	    <!--内容结束-->
	    
	    <!--foot内容开始 -->
	    <iframe class="yhj_foot" src="foot.html"></iframe>
	    <!--foot内容结束-->
	        
	    <!--  Totop按钮-->
	    <div class="yhj_totop">
	        <img src="images/yhj_right39.png" width="40" height="40"/>
	    </div>
	    <!--按钮结束-->
	    
	    <!-- 头像展示， 更改头像-->
	    
	    <!-- 密码修改块 -->
		<div id="changeppwdDialog" class="easyui-dialog" title="修改密码" style="width:400px;height:200px;"
				data-options="iconCls:'pag-list',closable:false,collapsible:false,minimizable:false,maximizable:false,resizable:false,closed:true">
			<div style="margin-left:5px;margin-right:5px;margin-top:5px;">
				<div style="width:260px; height:130px;float:left;margin-left:20px;margin-top:10px;"></br/>
					原&nbsp;&nbsp;&nbsp;密&nbsp;&nbsp;&nbsp;码&nbsp;：<input id="oldpwd" name="oldpwd" type="password" style="width:150px;"/></br/></br/>
					新&nbsp;&nbsp;&nbsp;密&nbsp;&nbsp;&nbsp;码&nbsp;：<input id="newpwd" name="newpwd" type="password" style="width:150px;"/></br/></br/>
					重复新密码：<input id="repwd" name="repwd" type="password" style="width:150px;"/></br/>
				</div>
				
				<div style="text-align:right;margin-right:30px;">
					<a href="javascript:savepwd()" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" style="position:absolute;right:10pxx;bottom:30px;">确定</a>
					<a href="javascript:yhj_cancel()" class="easyui-linkbutton" data-options="iconCls:'icon-undo'">取消</a>
				</div>
			</div>
		</div>
	    
	    
	    <script type="text/javascript">
	    	function savebaseinfo(){
	    		//验证
	    		var alais=$(".xl_person_index_info_input_loginname").val();
	    		var uname=$(".xl_person_index_info_input_truename").val();
	    		var jieshao=$(".xl_person_index_info_intro_textarea").val();
	    		var sex=$("input[name='xl_person_index_gender']:checked").val();
	    		//alert(alis+" "+uname+"  "+jieshao+"  "+sex);
	    		var alispatten= /^[a-zA-Z\u4e00-\u9fa5][a-zA-Z0-9\u4e00-\u9fa5]{3,9}$/ig;
	    		if(alais==''){
	    			swal("操作失败", "用户昵称必须填写", "error");
	    			return ;
	    		}
	    		if(jieshao==""){
	    			jieshao=" ";
	    		}
	    		if(!alispatten.test(alais)){
	    			swal("操作失败", "用户昵称不合法", "error");
	    			return ;
	    		}else{
	    			$.ajax({
	    				url:"cust.action?op=savebaseinfo",
	    				dataType:"JSON",
	    				type:"POST",
	    				data:{"uid":"${sessionScope.userinfosession.uid}","ualais":alais,"uname":uname,"uinfo":jieshao,"usex":sex,"ulogon":"${sessionScope.userinfosession.ulogon}"},
	    				success:function(data){
	    					if(data.code==1){
	    						swal("保存成功", "用户信息修改成功", "success");
	    						//alert(	$(document.getElementById('lk_head_adjust_div').contentWindow.document).$("#yhj_username").val()	);
	    						$("#lk_head_adjust_div").contents().find("#yhj_username").html(data.obj.ualais)	;
	    					}else{
	    						swal("操作失败", "修改个人信息操作失败，请联系管理员", "error");
	    					}
	    				}
	    			});
	    		}
	    	}
		    function yhj_cancel(){
		    	$("#oldpwd").val("");
		    	$("#newpwd").val("");
		    	$("#repwd").val("");
				$("#changeppwdDialog").window("close");
			}
		    
	    	function changepwd(){
	    		$("#changeppwdDialog").window("open").window("resize",{top:'500px',left:'500px'});
	    	}
	    
	    	$(".xl_person_index_photo").css({"background-image":"url(images/mixedPicData/${sessionScope.userinfosession.uimage})"},{"background-size":"contain"});
	    		
	    	function saveTel(){
	    		var qqnum=$(".xl_person_index_info_contact_input").eq(1).val();
	    		var tel=$(".xl_person_index_info_contact_input").eq(2).val();
	    		
	    		var qqpatten=/^[0-9]{6,10}$/ig;
	    		var telpatten=/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/ig;
	    		
	    		
	    		if(qqnum!="暂未填写QQ号"){
	    			if(!qqpatten.test(qqnum)){
	    				swal("操作失败", "QQ号填写不符合规范", "error");
		    			return ;
	    			}
	    		} 
	    		if(tel!="未知"){
	    			if(!telpatten.test(tel)){
	    				swal("操作失败", "手机号码填写不符合规范", "error");
		    			return ;
	    			}
	    		} 
	    		$.ajax({
    				url:"cust.action?op=savetel",
    				dataType:"JSON",
    				type:"POST",
    				data:{"uid":"${sessionScope.userinfosession.uid}","uqq":qqnum,"utel":tel},
    				success:function(data){
    					if(data.code==1){
    						swal("保存成功", "用户信息修改成功", "success");
    					}else{
    						swal("操作失败", "修改个人信息操作失败，请联系管理员", "error");
    					}
    				}
    			});
	    		
	    	}
	    	
	    	
	    	if("${userinfosession.ulogon}"!="${userinfosession.ualais}"){
	    		$(".xl_person_index_info_input_loginname").attr("value","${userinfosession.ualais}");
	    	}
	    	if("${userinfosession.usex}"=="男"){
	    		$(".xl_person_index_man_radio").eq(0).attr("check","true");
	    	}else if("${userinfosession.usex}"=="女"){
	    		$(".xl_person_index_man_radio").eq(1).attr("check","true");
	    	}else if("${userinfosession.usex}"=="保密"){
	    		$(".xl_person_index_man_radio").eq(2).attr("check","true");
	    	}
	    	
	    	
	    	function onChangePhoto(){
	    	
	    		$("#changeppwdDialog").window("open").window("resize",{top:'500px',left:'500px'});
	    	}
	    	
	    	function savepwd(){
	    		//alert($("#oldpwd").val());
	    		var oldpwd=$("#oldpwd").val();
	    		var newpwd=$("#newpwd").val();
	    		var repwd=$("#repwd").val();
	    		if(oldpwd==''){
	    			swal("原密码不能为空!"); 
	    			return ;
	    		}
	    		if(newpwd==''){
	    			swal("新密码不能为空!"); 
	    			return ;
	    		}
	    		if(repwd==''){
	    			swal("重复新密码不能为空!"); 
	    			return ;
	    		}
	    		if(oldpwd==newpwd){
	    			swal("新密码不能与旧密码一致!"); 
	    			return ;
	    		}
	    		if(newpwd!=repwd){
	    			swal("两次输入的新密码不一致"); 
	    			return ;
	    		}
	    		$.ajax({
	    				url:"cust.action?op=changepwd",
	    				dataType:"JSON",
	    				type:"POST",
	    				data:{"ulogon":"${sessionScope.userinfosession.ulogon}","oldpwd":oldpwd,"newpwd":newpwd,"repwd":repwd},
	    				success:function(data){
	    					if(data.code==1){
	    						swal("保存成功", "密码修改成功", "success");
	    						$("#oldpwd").val("");
						    	$("#newpwd").val("");
						    	$("#repwd").val("");
	    						$("#changeppwdDialog").window("close");
	    					}else{
	    						swal("操作失败", "修改密码失败，请联系管理员", "error");
	    						$("#oldpwd").val("");
						    	$("#newpwd").val("");
						    	$("#repwd").val("");
	    						$("#changeppwdDialog").window("close");
	    					}
	    				}
	    			});
	    	}
	    </script>
	    
  </body>
</html>
